$icon:'../../assets/res/img/icon_re.png';
.ans-l{
  display: inline-block;
  vertical-align: top;
  margin-top: 40px;
}
.recom .recom-h{
  height: 50px;
  padding:0 16px;
  line-height: 50px;
}
.ans-l .icon{
  display: inline-block;
  vertical-align: middle;
  background-image: url($icon);
  background-repeat: no-repeat;
}
.recom .recom-h .icon-recom{
  width: 24px;
  height: 26px;
  background-position: 0 -101px;
  margin-right: 4px;
}
.recom .recom-h a{
  color: #808080;
}
.recom .recom-c{
  position: relative;
  width: 890px;
  height: 324px;
  overflow: hidden;
  margin-top: 30px;
}
.recom .recom-c .photo{
  width: 80px;
  height: 80px;
  padding: 6px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: -46px;
  left: 60px;
}
.recom .recom-c .photo .photo-img img{
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.recom .recom-c .photo .appr{
  position: absolute;
  left: 60px;
  top: 72px;
}
.recom .recom-c .name{
  text-align: center;
  font-weight: bold;
  margin-top: 46px;
}
.recom .recom-c .tip{
  color: #808080;
  text-align: center;
  line-height: 22px;
  margin-top: 6px;
}
.recom .recom-c .brief{
  line-height: 22px;
  padding: 0 16px;
  height: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  margin-top: 6px;
}
.recom .recom-c .rec-btn{
  text-align: center;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 16px;
}
.recom .recom-c .rec-btn button{
  height: 32px;
  border-radius: 16px;
  color: #fff;
  background-color: #e94f4f;
  padding: 0 16px;
  margin: 0 4px;
  font-size: 12px;
}
.recom .recom-c .rec-btn .black{
  background-color: #a6a6a6;
}
.recom .recom-c .indi{
  width: 100%;
  position: absolute;
  left: 0;
  top: 160px;
  z-index: 1000;
}
.recom .recom-c .indi .icon-left{
  width: 28px;
  height: 28px;
  background-position: 0 -162px;
  position: absolute;
  left: 0;
  cursor: pointer;
}
.recom .recom-c .indi .icon-right{
  width: 28px;
  height: 28px;
  background-position: -57px -162px;
  position: absolute;
  right: 10px;
  cursor: pointer;
}
.lot .lot-h{
  margin-top: 30px;
  height: 50px;
  line-height: 50px;
  padding: 0 16px;
  position: relative;
}
.lot .lot-h .icon-lot{
  width: 28px;
  height: 26px;
  background-position: -59px -100px;
  margin-right:4px;
}
.lot .lot-h .icon {
  outline:none;
}
.lot .lot-h .icon-left-category{
  position: absolute;
  width: 30px;
  height: 30px;
  background-position: -969px -59px;
  cursor: pointer;
  left: 159px;
  top: 10px;
}
.lot .lot-h .icon-right-category{
  position: absolute;
  width: 30px;
  height: 30px;
  background-position: -969px -104px;
  cursor: pointer;
  right:10px;
  top: 10px;
}
.lot .category-nav{
  width: 626px;
  height: 50px;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  margin-right: 30px;
}
.lot .category-nav::-webkit-scrollbar{
  height: 3px;
  width: 100%;
}
.lot .category-nav .ans-nav{
  position: absolute;
  height: 51px;
  max-width: 1000px;
  top: -1px;
  left: 0;
  white-space: nowrap;
}
.lot .category-nav .category-nav-item{
  line-height: 48px;
}
// .lot .category-nav .category-nav-item:hover{
//   color: #f23e3e;
// }
.lot .lot-c{
  margin-top: 30px;
  min-height: 100px;
  padding: 0 10px 1px 10px;
}
.lot-c li{
  padding: 20px 14px;
  border-bottom: 1px solid #e6e6e6;
}
.lot-c .title{
  font-weight: bold;
  max-width: 100%;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 16px;
}
.lot-c .photo-img{
  height: 110px;
  width: 64px;
  display: inline-block;
  vertical-align: top;
  position: relative;
}
.lot-c .photo-s{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}
.lot-c .photo-s img{
  width: 100%;
  height: 100%;
}
.lot-c .photo-img .icon-mid{
  position: absolute;
  right: 8px;
  top: 50px;
}
.lot-c .price{
  width: 60px;
  height: 28px;
  color: #e94f4f;
  display: block;
  background-color: #fff2e2;
  border-radius: 14px;
  text-align: center;
  line-height: 28px;
  margin:18px auto 0 auto;
}
.lot-c .info{
  display: inline-block;
  width: 750px;
  height: 110px;
  position: relative;
}
.lot-c .name{
  color: #00a0e9;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  margin-top: -8px;
}
.lot-c .line{
  display: inline-block;
  width: 1px;
  height: 14px;
  background-color: #cccccc;
  margin: 0 8px;
}
.lot-c .lab{
  color: #808080;
  display: inline-block;
  vertical-align: middle;
  margin-top: -8px;
}
.lot-c .txt{
  color: #484848;
  margin-top: 10px;
  height: 48px;
  line-height: 24px;
  position: relative;
}
.lot-c .txt img{
  width: 100%;
  height: 100%;
}
.lot-c .txt .unlock{
  position: absolute;
  width: 172px;
  height: 34px;
  line-height: 34px;
  color: #fff;
  background-color: #e94f4f;
  border-radius: 17px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
}
.lot-c .txt .unlock .icon{
  display: inline-block;
  vertical-align: middle;
  height: 14px;
  width: 14px;
  background-image: url($icon);
  background-repeat: no-repeat;
  background-position: 0 -36px;
  margin-right: 8px;
}
.lot-c .txt .look{
  position: absolute;
  width: 92px;
  height: 34px;
  line-height: 34px;
  color: #fff;
  background-color: #00a0e9;
  border-radius: 17px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
}
.lot-c .tips{
  color: #808080;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
}
.lot-c .tips .mr16{
  margin-right: 16px;
}
.lot-c .tips a{
  color: #808080;
}
.lot-c .tips .icon{
  display: inline-block;
  vertical-align: middle;
  height: 20px;
  width: 20px;
  background-image: url($icon);
  background-repeat: no-repeat;
  margin-right: 6px;
}
.lot-c .tips .icon-share{
  background-position: -66px -33px;
}
.lot-c .tips .icon-collet{
  background-position: -127px -33px;
}
.lot-c .tips .icon-praise{
  background-position: -191px -33px;
}
.lot-c .tips .icon-collet.on{
  background-position: -127px 0;
}
.lot-c .tips .icon-praise.on{
  background-position: -191px 0;
}
.lot-c .load-more{
  display: block;
  width: 94%;
  height: 38px;
  border: 1px solid #e6e6e6;
  color: #808080;
  border-radius: 5px;
  background: #fff;
  margin: 20px auto;
}
.ans-r{
  margin-top: 40px;
}
.ans-r .ans-rank{
  margin-top: 30px;
}

/* 周回答排行榜 */
.ans-rank .item-h{
    padding: 0 16px;
}
.ans-rank .ans-rank-c li{
	padding: 18px 10px;
	border-bottom: 1px solid #e6e6e6;
	position: relative;
}
.ans-rank .ans-rank-c li:last-child{
	border-bottom: 0;
}
.ans-rank .ans-rank-c .photo{
	width: 48px;
	height: 48px;
	display: inline-block;
	vertical-align: top;
	position: relative;
}
.ans-rank .ans-rank-c .photo .photo-img img{
	width: 46px;
	height: 46px;
	border-radius: 50%;
}
.ans-rank .ans-rank-c .photo .appr{
	position: absolute;
	right: 0;
	bottom: 0;
}
.ans-rank .ans-rank-c .info{
	width: 140px;
	height: 46px;
	display: inline-block;
	vertical-align: top;
	margin: 0 10px;
}
.ans-rank .ans-rank-c .info .name{
	display: block;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ans-rank .ans-rank-c .info .tip{
	color: #808080;
	margin-top: 8px;
	display: block;
}
.ans-rank .ans-rank-c .info .tip i{
	color: #e94f4f;
	margin: 0 4px;
}
.ans-rank .ans-rank-c .quiz-btn{
	color: #fff;
	border-radius: 12px;
	width: 54px;
	height: 24px;
	background-color: #f23e3e;
	position: absolute;
	top:32px;
	right: 16px;
}
